<template>
	<view>
		<!-- 		<view class="content active">
			<image class="logo active" src="/static/logo.png" mode="aspectFit"></image>
			<view class="tabbar-box-wrap">
				<view class="tabbar-box">
					<view class="tabbar-box-item" @click="addDevice" >
						<image class="box-image" src="/static/icons/wificolorful.png" mode="aspectFit">
						</image>
						<text class="explain">添加设备</text>
					</view>
				</view>
			</view>
		</view> -->
		<view class='main'>
			<view class='left'>
				<view class='tabs'>
					<view class='tabs_item' v-for='(item,index) in devicelist ' @click='changeTab' :data-index='index'>
						<text :class=' index===activeKey?"active":"none" '>{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class='right'>
				<scroll-view scroll-y scroll-with-animation enhanced :scroll-into-view='"main"- elementId '
					bindscroll='scroll'>
					<view class='products' :id='"main"- index ' v-for='(item,index) in devicelist '>
						<view class='title'>
							{{ item.name }}
						</view>
						<view class='products_item' v-for='(item1,index1) in item.devices ' :key='index1'
							@click='addDevice'>
							<view class='icon'>
								<image :src=' item1.url ' />
							</view>
							<view class='info'>
								<view class='name'>{{ item1.name }}</view>
								<view class='describe'>{{ item1.des }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view>
			<u-tabbar active-color="#0000ff" inactive-color="#000000" :list="list" :mid-button="true"></u-tabbar>
		</view>
	</view>
</template>

<script>
	const {
		list
	} = require('../../utils/tabbar.js');
	export default {
		data() {
			return {
				list,
				activeKey: 0,
				elementId: 0,
				devicelist: [{
					name: '电工照明',
					id: 0,
					devices: [{
						id: 0,
						name: "窗帘",
						des: '一键远程开机',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1568613757827.png"
					}, {
						id: 1,
						name: "灯",
						des: '一键远程开机',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585738057372.png"
					}, {
						id: 2,
						name: "插座",
						des: '一键远程开机',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737911180.png"
					}, {
						id: 3,
						name: "开关面板",
						des: '一键远程开机',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737869517.png"
					}, {
						id: 4,
						name: "灭蚊器",
						des: '一键远程开机',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1568972293729.png"
					}]
				}, {
					name: '家用电器',
					id: 1,
					devices: [{
						id: 0,
						name: "环境监测仪",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735911905.png"
					}, {
						id: 1,
						name: "断路器",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1559631642708.png"
					}, {
						id: 2,
						name: "电饭煲",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737625713.png"
					}, {
						id: 3,
						name: "冰箱",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585736782834.png"
					}, {
						id: 4,
						name: "油烟机",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585737687733.png"
					}, {
						id: 5,
						name: "地暖",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735982904.png"
					}, {
						id: 6,
						name: "净水器",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735954567.png"
					}]
				}, {
					name: '运动健康',
					id: 2,
					devices: [{
						id: 0,
						name: "跑步机",
						des: '体验智能生活',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585735911905.png"
					}, {
						id: 1,
						name: "足浴盆",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1559631642708.png"
					}]
				}, {
					name: '厨房电器',
					id: 3,
					devices: [{
						id: 0,
						name: "加湿器",
						des: '体验智能生活',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585736229287.png"
					}, {
						id: 1,
						name: "除湿器",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585736102768.png"
					}, {
						id: 1,
						name: "烤箱",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585736871022.png"
					}, {
						id: 1,
						name: "新风机",
						des: '智能，便捷',
						url: "http://iotx-paas-admin.oss-cn-shanghai.aliyuncs.com/publish/image/1585736041757.png"
					}]
				}],
				load: true,
			}
		},
		methods: {
			addDevice() {
				uni.navigateTo({
					url: '/pages/create/create'
				})
			},
			changeTab(e) {
				const {
					index
				} = e.currentTarget.dataset;
				this.activeKey = index;
				this.elementId = index;

			},

			scroll: function(e) {
				let that = this;
				let list = this.devicelist;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < list.length; i++) {
						let view = wx.createSelectorQuery().select("#main-" + list[i].id);
						view.fields({
							size: true
						}, data => {
							list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							list[i].bottom = tabHeight;
						}).exec();
					}
					that.load = false;
					that.list = list;

				}
				let scrollTop = e.detail.scrollTop - 25;
				for (let i = 0; i < list.length; i++) {
					if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
						that.activeKey = list[i].id;
						return false
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		/* #endif */
		/* #ifndef H5 */
		height: calc(100vh - 80rpx);
		/* #endif */
		transition: opacity 0.3s;
		background: rgba(0, 0, 0, .3);
		// opacity: 0;

		// &.active {
		// 	opacity: 1;
		// }

		// .logo {
		// 	position: relative;
		// 	margin-top: -400upx;
		// 	width: 200upx;
		// 	height: 200upx;
		// 	z-index: -1;
		// 	// opacity: 0;
		// 	transition: opacity 0.3s;
		// 	opacity: 1;
		// 	// &.active {
		// 	// 	
		// 	// }
		// }
	}

	// .tabbar-box-wrap {
	// 	position: absolute;
	// 	// width: 100%;
	// 	padding: 50rpx;
	// 	box-sizing: border-box;
	// 	bottom: 200rpx;
	// 	left: 50;

	// 	.tabbar-box {
	// 		position: relative;
	// 		display: flex;
	// 		width: 100%;
	// 		background: #fff;
	// 		border-radius: 20upx;
	// 		padding: 15upx 20upx;
	// 		box-sizing: border-box;
	// 		z-index: 2;
	// 		box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

	// 		&:after {
	// 			content: '';
	// 			position: absolute;
	// 			bottom: -16upx;
	// 			left: 0;
	// 			right: 0;
	// 			margin: auto;
	// 			width: 50upx;
	// 			height: 50upx;
	// 			transform: rotate(45deg);
	// 			background: #fff;
	// 			z-index: 1;
	// 			box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
	// 			border-radius: 2px;
	// 		}

	// 		&:before {
	// 			content: '';
	// 			position: absolute;
	// 			top: 0;
	// 			left: 0;
	// 			width: 100%;
	// 			height: 100%;
	// 			background: #ffffff;
	// 			border-radius: 20upx;
	// 			z-index: 2;
	// 		}

	// 		.tabbar-box-item {
	// 			// position: relative;
	// 			width: 100%;
	// 			z-index: 3;
	// 			margin: 15rpx 50rpx;
	// 			color: $uni-color-subtitle;
	// 			text-align: center;
	// 			font-size: $uni-font-size-base;

	// 			.box-image {
	// 				width: 100%;
	// 				height: $uni-img-size-lg;
	// 				z-index: 3;
	// 			}
	// 		}
	// 	}
	// }

	.main {
		display: flex;
		margin: 20rpx 0;
	}

	.main .left {
		width: 200rpx;
	}

	.main .left .tabs {
		width: 100%;
	}

	.main .left .tabs .tabs_item {
		height: 80rpx;
		display: flex;
		justify-content: center;
		background-color: #ffffff;
		align-items: center;
	}

	.main .left .tabs .tabs_item>text {
		display: block;
		width: 100%;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.active {
		border-right: 10rpx solid red;
		/* background-color:rgba(0,0,0,.1); */
		color: red;
	}

	.main.right {
		width: 550rpx;
	}

	.right scroll-view {
		height: calc(100vh - 320rpx);
		width: 490rpx;
		margin: 0 30rpx;
	}

	/* 去掉滚动条 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.right .products {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.right .products .title {
		display: block;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 40rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, .1);
		background-color: #ffffff;
		color: red;
		font-size: 32rpx;
	}

	.right .products .products_item {
		width: 100%;
		height: 150rpx;
		background-color: #ffffff;
		margin-bottom: 30rpx;
		display: flex;
	}

	.right .products .products_item:active {
		background-color: rgba(0, 0, 0, .1);
	}

	.right .products .products_item .icon {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.right .products .products_item .icon>image {
		width: 80%;
		height: 80%;
	}

	.right .products .products_item .info {
		flex: 1;
		padding: 20rpx;
	}

	.right .products .products_item .info .name {
		display: block;
		height: 60rpx;
		line-height: 60rpx;
	}

	.right .products .products_item .info .describe {
		display: block;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: rgba(0, 0, 0, .7);
	}
</style>
